<template>
  <div>

    <van-swipe-cell v-for="item in list" :key="item.id">
      <van-checkbox v-model="item.checked">单选</van-checkbox>
      <van-card :num="item.buynum" :price="item.goodsprice / 100" :title="item.goodsname" :thumb="item.img">
        <template #footer>
          <van-button size="mini">增加</van-button>
          <van-button size="mini">减少</van-button>
        </template>
      </van-card>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>

    <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>

import { changeNav } from '@/mixins/changenav'
import { mapState, mapActions } from "vuex";
export default {
  mixins: [changeNav],//混入
  data() {
    return {
      checkedAll: false,
    };
  },
  created() {
    let userinfo = window.localStorage.getItem("userinfo");
    userinfo = JSON.parse(userinfo);
    this.initList({
      userid: userinfo.id
    })

  },
  watch: {
    checkedAll() {
      this.list.forEach(item => {
        item.checked = this.checkedAll;
      })
    }
  },
  computed: {
    ...mapState("shoppingStore", ["list"]),
    totalPrice() {
      let checkedList = this.list.filter(item => item.checked);
      return checkedList.length ? checkedList.map(item => item.buynum * item.goodsprice).reduce((a, b) => a + b) : 0

    }
  },
  methods: {
    ...mapActions("shoppingStore", ["initList"]),
    onSubmit() {
      if (this.list.some(item => item.checked)) {
        this.$router.push("/pay");
      } else {
        this.$toast.fail("请选择其中一件商品进行结算");
      }
    }
  },

};
</script>

<style scoped>
/* /deep/ */
/* >>> */
.delete-button {
  height: 100%;
}
</style>
